{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    .layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
</style>
{/block}
{block name="main"}
<div class="layuimini-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>系统按钮信息采集</legend>
    </fieldset>
    <div class="layuimini-main" style="width: 650px;">
        <form class="layui-form" lay-filter="example" action="">
            <input type="hidden" name="id">
            <input type="hidden" name="pid">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="title" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">图标</label>
                    <div class="layui-input-inline">
                        <input type="text" name="icon" id="iconPicker1" value="{$res.icon}" lay-filter="iconPicker2" class="hide">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="href"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">打开方式</label>
                    <div class="layui-input-inline">
                        <select name="target">
                            <option value=""></option>
                            <option value="_self" selected>当前页</option>
                            <option value="_target">新页面</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="" class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="sort" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="status" lay-skin="switch" lay-text="开|关">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['iconPickerFa', 'form', 'layer'], function () {
        var iconPickerFa = layui.iconPickerFa,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker1',
            // fa 图标接口
            url: "/system/getVariables",
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                // console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                // console.log(d);
            }
        });
        form.val('example', {
            "id": '{$res.id}'
            , "pid": '{$res.pid}'
            , "title": '{$res.title}'
            , "icon" : '{$res.icon}'
            , "href" : '{$res.href}'
            , "target": '{$res.target}' //复选框选中状态
            , "sort": '{$res.sort}' //开关状态
            , "status": '{$res.status}'
        })
        form.on('submit(demo1)', function (data) {
            data = data.field
            if(data.status == 'on') data.status = 1
            // var index = layer.load(1)
            $.ajax({
                url:'/system/submitMenu',
                type:'post',
                data,
                success:res=>{
                    parent.parent.location.reload(true);//刷新父级页面
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);

                }
            })
            return false;
        });
    });

</script>
{/block}
